<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin:0px;
                padding:0px;
                list-style: none;
            }
            
            div{
                margin:40px auto;
                position: relative;
                width: 400px;
            }
           img:nth-of-type(1){
           width: 400px;
         
           }
           img:nth-of-type(2){
            position:absolute;
               left:18%;
               top:17%;
               margin-top:3px;
               margin-left:5px;
               width: 148px;
           }

        </style>
    </head>
    <body>
        <div>
        <img src="images/pic.png" alt="">
        <img src="images/row.png" alt="" id="chou">
    </div>

    <script>
        var chou=document.getElementById('chou');
        var n=0;
        var timer;

        chou.onclick=function(){
            clearInterval(timer)
            chou.style.transfrom='rotate(0deg)';
            n=0;
            timer=setInterval(function(){
            var a=parseInt(Math.random()*8); 
            m=360*3+a*45;
                n=n+45;
                
                if(n>=m){
                    console.log(1)
                    clearInterval(timer);
                }else{
                    chou.style.transform=`rotate(${n}deg)`;
                } 
        },55)
     
        }
    </script>
    </body>
    </html>